.m-padded-mini{
    padding:0.2em !important;
}
.m-padded-tiny{
    padding:0.3em !important;
}

.m-padded{
    padding:1em !important;
}

.m-padded-tb-mini{
    padding-top:0.2em !important;
    padding-bottom:0.2em !important;/*  1em=14px */
}
.m-padded-tb-tiny{
    padding-top:0.3em !important;
    padding-bottom:0.3em !important;
}

.m-padded-tb-small{
    padding-top:0.5em !important;
    padding-bottom:0.5em !important;
}

.m-padded-tb{
    padding-top:1em !important;
    padding-bottom:1em !important;
}
.m-padded-tb-large{
    padding-top:2em !important;
    padding-bottom:2em !important;
}
.m-padded-tb-big{
    padding-top:3em !important;
    padding-bottom:3em !important;
}
.m-padded-tb-huge{
    padding-top:4em !important;
    padding-bottom:4em !important;
 }

.m-padded-tb-massive{
    padding-top:5em !important;
    padding-bottom:5em !important;
}

.m-padded-lr-responsive{
    padding-left: 4em!important;
    padding-right: 4em!important;
}

/*字体*/
.m-text{
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    line-height: 1.8;
}
.m-text-thin{
    font-weight: 300 !important;
}
.m-text-spaced{
    letter-spacing: 1px !important;
}
.m-text-lined{
    line-height: 1.8;
}


/*******透明度***********/
.m-opacity-tiny{
    opacity: 0.6!important;

}
.m-opacity-mini{
    opacity: 0.8!important;
}
.m-opacity-bcg{
    opacity:0.92!important;
}


/*display*/
.m-inline-block{
    display: inline-block !important;
}



/*图片*/

.img-cover{
    aspect-ratio: 2/1;
}
.img-normal{
    width:200px ;
    height: 100px;
}
.img-mini{
    width:40px ;
    height: 40px;
}

.m-container{
    max-width: 72em !important;
    margin:auto; !important;
}

.m-container-small{
    max-width: 60em !important;
    margin:auto; !important;
}

/*margin*/


.m-margin-top-small{
    margin-top:0.5em !important;
}

.m-margen-top{
    margin-top: 1em!important;
}
.m-margen-top-large{
    margin-top: 2em!important;
}
.m-margin-tb-tiny{
    margin-top: 0.3em !important;
    margin-bottom: 0.3em!important;
}

.m-margin-bottom-small{
    margin-bottom: 0.2em!important;
}

/*位置*/
.m-right-top{
    position: absolute;
    top:0;
    right:0;
}

.m-mobile-show{
    display: none !important;
}

/*阴影*/
.m-shadow-small{
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;

}

/*布局*/
.m-fixed {
    position:fixed; !important;
    z-index: 10!important;
}
.m-right-bottom{
    bottom:0!important;
    right:0 !important;
}



/*手机端*/
@media screen and (max-width: 768px){/*指定了在屏幕宽度小于等于 768px 的情况下应用以下样式。*/
    .m-mobile-hide{
        display:none !important;/*带有 `.m-mobile-hide` 类的元素将被隐藏*/
    }
    .m-mobile-show{
        display: block !important;
    }
    .m-padded-lr-responsive{
        padding-left: 0!important;
        padding-right: 0!important;
    }
   .m-mobile-lr-clear{
        padding-left: 0!important;
        padding-right: 0!important;
    }

    .m-mobile-wide {
        width: 100%;
    }
}
